<template>
	<div class="page">
		<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<!-- 搜索框-->
			<el-form-item prop="user.id">
				<GridSelect title="选择用户" placeholder="请选择用户" labelName='userName' labelValue='id'
					:value="searchForm.user.id" :limit="1" size="small"
					@getValue='(value) => {searchForm.user.id=value}' :columns="[
                    {
                      prop: 'id',
                      label: '主键'
                    },
                    {
                      prop: 'userName',
                      label: '用户名'
                    }
                    ]" :searchs="[
                    {
                      prop: 'id',
                      label: '主键'
                    },
                    {
                      prop: 'userName',
                      label: '用户名'
                    }
                    ]" dataListUrl="/dlyrl/hr/userinformation/userInformation/list" entityBeanName="userInformation"
					queryEntityUrl="/dlyrl/hr/userinformation/userInformation/queryById">
				</GridSelect>
			</el-form-item>
			<el-form-item prop="enterprise.id">
				<GridSelect title="选择公司" placeholder="请选择公司" labelName='companyName' labelValue='id'
					:value="searchForm.enterprise.id" :limit="1" size="small"
					@getValue='(value) => {searchForm.enterprise.id=value}' :columns="[
                    {
                      prop: 'id',
                      label: '主键'
                    },
                    {
                      prop: 'companyName',
                      label: '企业名称'
                    }
                    ]" :searchs="[
                    {
                      prop: 'id',
                      label: '主键'
                    },
                    {
                      prop: 'companyName',
                      label: '企业名称'
                    }
                    ]" dataListUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/list"
					entityBeanName="enterpriseInformation"
					queryEntityUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/queryById">
				</GridSelect>
			</el-form-item>
			<el-form-item prop="department.id">
				<SelectTree ref="department.id" :props="{
                      value: 'id',             // ID字段名
                      label: 'name',         // 显示名称
                      children: 'children'    // 子级字段名
                    }" placeholder="请选择部门" size="small"
					url="/dlyrl/hr/orporateinstitutions/orporateInstitutions/treeData" :value="searchForm.department.id"
					:clearable="true" :accordion="true" @getValue="(value) => {searchForm.department.id=value}" />
			</el-form-item>
			<el-form-item prop="idCard">
				<el-input size="small" v-model="searchForm.idCard" placeholder="用户身份证号" clearable></el-input>
			</el-form-item>
			<!-- <el-form-item prop="phone">
				<el-input size="small" v-model="searchForm.phone" placeholder="用户手机号" clearable></el-input>
			</el-form-item> -->
			<!-- <el-form-item prop="earlyWarning">
				<el-select v-model="searchForm.earlyWarning" placeholder="请选择合同有效期" size="small"
					style="width: 100%;">
					<el-option v-for="item in $dictUtils.getDictList('warning')" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item> -->
			<el-form-item style="float: right">
				<el-button type="primary" @click="refreshList()" size="small">查询</el-button>
				<el-button @click="resetSearch()" size="small">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 导入导出-->
		<el-dialog title="导入Excel" :visible.sync="isImportCollapse">
			<el-form size="small" :inline="true" v-show="isImportCollapse" ref="importForm">
				<el-form-item>
					<el-button type="default" @click="downloadTpl()" size="small">下载模板</el-button>
				</el-form-item>
				<el-form-item prop="loginName">
					<el-upload class="upload-demo"
						:action="`${this.$http.BASE_URL}/dlyrl/hr/dispatchcontract/dispatchContract/import`"
						:on-success="uploadSuccess" :show-file-list="true">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
					</el-upload>
				</el-form-item>
			</el-form>
		</el-dialog>
		<div class="bg-white top">
			<el-row>
				<!-- <el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:add')" type="primary"
					size="small" icon="el-icon-plus" @click="add()">新建</el-button> -->
				<!-- <el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:edit')" type="warning"
					size="small" icon="el-icon-edit-outline" @click="edit()" :disabled="dataListSelections.length != 1"
					plain>修改</el-button>
				<el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:del')" type="danger"
					size="small" icon="el-icon-delete" @click="del()" :disabled="dataListSelections.length <= 0" plain>
					删除
				</el-button> -->
				<el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:edit')" type="warning" size="small" icon="el-icon-edit-outline" @click="edit()"
					:disabled="dataListSelections.length != 1 || dataListSelections[0].jobStatus==4" plain>确认聘用</el-button>
				<el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:del')" type="danger"   size="small" icon="el-icon-delete" @click="del()"
					:disabled="dataListSelections.length <= 0 || status" plain >拒绝聘用
				</el-button>
				<el-button-group class="pull-right">
					<el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:import')" type="default"
						size="small" icon="el-icon-upload2" title="导入" @click="isImportCollapse = !isImportCollapse">
					</el-button>
					<el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:export')" type="default"
						size="small" icon="el-icon-download" title="导出" @click="exportExcel()"></el-button>
					<el-button type="default" size="small" icon="el-icon-refresh" @click="refreshList">
					</el-button>
				</el-button-group>
			</el-row>
			<el-table :data="dataList" size="small" height="calc(100% - 80px)" @selection-change="selectionChangeHandle"
				@sort-change="sortChangeHandle" v-loading="loading" class="table"
				:cell-style="cellStyles" style="border:1px solid #d6cfe2;"
				:header-cell-class-name="cellHeadStyle" 
				:row-class-name="tableRowClassName">
				<el-table-column type="selection" header-align="center" align="center" width="50">
				</el-table-column>
				<el-table-column prop="user.realName" show-overflow-tooltip label="姓名" fixed="left" align="center">
					<template slot-scope="scope">
						<el-link  type="primary" :underline="false"   @click="view(scope.row.id)">{{scope.row.user.realName}}</el-link>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="name" show-overflow-tooltip label="名称" width="120px">
				</el-table-column> -->
				<el-table-column prop="phone" label="电话" width="110" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.phone?scope.row.phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"):""}}</template>
				</el-table-column>
				<el-table-column prop="idCard" label="身份证号" width="110" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.idCard? scope.row.idCard.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2"):""}}</template>
				</el-table-column>
				<el-table-column prop="enterprise.companyName" show-overflow-tooltip label="所属公司" width="120px">
				</el-table-column>
				<el-table-column prop="department.name" show-overflow-tooltip label="部门" width="120px">
				</el-table-column>
				<el-table-column prop="branchdepart.name" show-overflow-tooltip label="分部" width="120px">
				</el-table-column>
				<el-table-column prop="postName" show-overflow-tooltip label="岗位名称" width="130px">
				</el-table-column>
				<el-table-column prop="jobStatus" show-overflow-tooltip
					label="在职状态" width="120px">
					<template slot-scope="scope">
						{{ $dictUtils.getDictLabel("employment_status", scope.row.jobStatus, '-') }}
					</template>
				</el-table-column>
				<el-table-column prop="beginTime" show-overflow-tooltip label="开始时间" width="120px">
				</el-table-column>
				<el-table-column prop="endTime" show-overflow-tooltip label="到期时间" width="120px">
				</el-table-column>
				<el-table-column prop="userIsSure" show-overflow-tooltip
					label="是否确认" width="130px">
					<template slot-scope="scope">
						{{ $dictUtils.getDictLabel("usersure", scope.row.userIsSure, '-') }}
					</template>
				</el-table-column>
				<el-table-column prop="userSalary" show-overflow-tooltip label="薪资" width="120px">
				</el-table-column>
				<el-table-column prop="probationPeriod" show-overflow-tooltip label="试用期时间" width="120px">
				</el-table-column>
				<el-table-column prop="probationSalary" show-overflow-tooltip label="试用期薪资" width="120px">
				</el-table-column>
				<!-- <el-table-column prop="contractNumber" show-overflow-tooltip label="合同编号" width="120px">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false"
							v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:edit')"
							@click="edit(scope.row.id)">{{scope.row.contractNumber}}</el-link>
						<el-link type="primary" :underline="false"
							v-else-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:view')"
							@click="view(scope.row.id)">{{scope.row.contractNumber}}</el-link>
						<span v-else>{{scope.row.contractNumber}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="signingTime" show-overflow-tooltip label="签约时间" width="120px">
				</el-table-column> -->
				<!-- <el-table-column prop="photo" show-overflow-tooltip label="签名照片" width="120px">
					<template slot-scope="scope" v-if="scope.row.photo">
						<a :href="item" target="_blank" :key="index"
							v-for="(item, index) in scope.row.photo.split('|')">
							{{decodeURIComponent(item.substring(item.lastIndexOf("/")+1))}}
						</a>
					</template>
				</el-table-column>
				<el-table-column prop="formwork" show-overflow-tooltip label="合同模板" width="120px">
					<template slot-scope="scope" v-if="scope.row.formwork">
						<a :href="item" target="_blank" :key="index"
							v-for="(item, index) in scope.row.formwork.split('|')">
							{{decodeURIComponent(item.substring(item.lastIndexOf("/")+1))}}
						</a>
					</template>
				</el-table-column> -->
				<el-table-column prop="name" show-overflow-tooltip label="名称" width="120px">
				</el-table-column>
				<el-table-column prop="idCard" label="身份证号" width="110" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.idCard? scope.row.idCard.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2"):""}}</template>
				</el-table-column>
				
				<el-table-column prop="phone" show-overflow-tooltip sortable="custom" label="手机号" width="120px">
				</el-table-column>
				<el-table-column prop="earlyWarning" show-overflow-tooltip
					label="合同有效期" width="120px">
					<!-- <template slot-scope="scope">
						{{ $dictUtils.getDictLabel("warning", scope.row.earlyWarning, '-') }}
					</template> -->
				</el-table-column>
				<el-table-column prop="remarks" show-overflow-tooltip label="备注信息" width="120px">
				</el-table-column>
				<!-- <el-table-column header-align="center" align="center" fixed="right" :key="Math.random()" width="180"
					label="操作">
					<template slot-scope="scope">
						<el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:view')" type="text"
							icon="el-icon-view" size="mini" @click="view(scope.row.id)">查看</el-button>
						<el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:edit')" type="text"
							icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">确认聘用</el-button>
						<el-button v-if="hasPermission('dlyrl:hr:dispatchcontract:dispatchContract:del')" type="text"
							icon="el-icon-delete" size="mini" @click="del(scope.row.id)">拒绝聘用</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<DispatchContractForm ref="dispatchContractForm" @refreshDataList="refreshList"></DispatchContractForm>
	</div>
</template>

<script>
	import tableStyles from '../../../../../utils/mixins.js'
	import DispatchContractForm from './DispatchContractForm'
	import GridSelect from '@/components/gridSelect'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				searchForm: {
					user: {
						id: ''
					},
					enterprise: {
						id: ''
					},
					department: {
						id: ''
					},
					idCard: '',
					phone: '',
					earlyWarning: ''
				},
				dataList: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				orderBy: '',
				dataListSelections: [],
				isImportCollapse: false,
				loading: false,
				status:false,//聘用状态
				arrs:[],//聘用状态数组
			}
		},
		components: {
			GridSelect,
			SelectTree,
			DispatchContractForm
		},
		activated() {
			this.refreshList()
		},
		methods: {
			 //合同预警
			cellStyles({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if(row.earlyWarning>0&&row.earlyWarning<10){
					return "background-color:#CC3332;padding:0.15rem;border-left:1px solid #d6cfe2;";
				}else if(row.earlyWarning>=10&&row.earlyWarning<20){
					return "background-color:#FF6601;padding:0.15rem;border-left:1px solid #d6cfe2;";
				}else if(row.earlyWarning>=20&&row.earlyWarning<30){
					return "background-color:#FDFC09;padding:0.15rem;border-left:1px solid #d6cfe2;";
				}else if(row.earlyWarning=='已过期'){
					return "background-color:#C1C1C1;padding:0.15rem;border-left:1px solid #d6cfe2;";
					
				}else {
					return "padding:0.15rem;border-left:1px solid #d6cfe2;border-top:1px solid #d6cfe2";
				}
			},
			// 获取数据列表
			refreshList() {
				this.loading = true
				this.$http({
					url: '/dlyrl/hr/dispatchcontract/dispatchContract/list',
					method: 'get',
					params: {
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						'orderBy': this.orderBy,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list
						this.total = data.page.count
						this.loading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections =[];
				this.arrs=[];
				this.status=false;
				this.dataListSelections = val
				this.arrs=this.dataListSelections.map(item => {
					return item.jobStatus
				})
				if(this.arrs.indexOf("4")>-1){
					this.status=true
				}
			},

			// 排序
			sortChangeHandle(obj) {
				if (obj.order === 'ascending') {
					this.orderBy = obj.prop + ' asc'
				} else if (obj.order === 'descending') {
					this.orderBy = obj.prop + ' desc'
				} else {
					this.orderBy = ''
				}
				this.refreshList()
			},
			// 新增
			add() {
				this.$refs.dispatchContractForm.init('add', '')
			},
			// 修改
			edit(id) {
				id = id || this.dataListSelections.map(item => {
					return item.id
				})[0]
				this.$refs.dispatchContractForm.init('edit', id)
			},
			// 查看
			view(id) {
				this.$refs.dispatchContractForm.init('view', id)
			},
			// 删除
			del(id) {
				let ids = id || this.dataListSelections.map(item => {
					return item.id
				}).join(',')
				this.$confirm(`确定拒绝聘用该用户吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$http({
						url: '/dlyrl/hr/dispatchcontract/dispatchContract/delete',
						method: 'delete',
						params: {
							'ids': ids
						}
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg)
							this.refreshList()
						}
						this.loading = false
					})
				})
			},
			// 导入成功
			uploadSuccess(res, file) {
				if (res.success) {
					this.$message.success({
						dangerouslyUseHTMLString: true,
						message: res.msg
					})
				} else {
					this.$message.error(res.msg)
				}
			},
			// 下载模板
			downloadTpl() {
				this.$utils.download('/dlyrl/hr/dispatchcontract/dispatchContract/import/template')
			},
			exportExcel() {
				let params = {
					...this.searchForm
				}
				this.$utils.download('/dlyrl/hr/dispatchcontract/dispatchContract/export', params)
			},
			resetSearch() {
				this.$refs.searchForm.resetFields()
				this.refreshList()
			}
		}
	}
</script>
